<div style="text-align: center;" *ngIf="isLoading">
  <nz-spin nzSimple [nzSize]="'large'"></nz-spin>
</div>
<div id="main" *ngIf="!isLoading">
  <h3>个人中心</h3>
  <nz-divider></nz-divider>
  <div>
    <div style="text-align: center;" class="data_div">
      <img style="width: 100px;height: 100px;" src="{{user.head}}" *ngIf="!isInfoVisible">
      <nz-upload
        *ngIf="isInfoVisible"
        class="avatar-uploader"
        nzAction="https://www.mocky.io/v2/5cc8019d300000980a055e76"
        nzName="avatar"
        nzListType="picture-card"
        [nzShowUploadList]="false"
        [nzBeforeUpload]="beforeUpload"
        (nzChange)="handleChange($event)"
      >
        <ng-container *ngIf="!avatarUrl">
          <i class="upload-icon" nz-icon [nzType]="loading ? 'loading' : 'plus'"></i>
          <div class="ant-upload-text">Upload</div>
        </ng-container>
        <img *ngIf="avatarUrl" [src]="avatarUrl" style="width: 100%"/>
      </nz-upload>
    </div>
    <div class="data_div">
      <label>昵称：</label>
      <span *ngIf="!isInfoVisible">{{user.nickname}}</span>
      <span *ngIf="isInfoVisible"><input style="width: 200px;" nz-input [(ngModel)]="user.name"></span>
    </div>
    <div class="data_div">
      <label>邮箱：</label>
      <span *ngIf="!isInfoVisible">{{user.email}}</span>
      <span *ngIf="isInfoVisible"><input style="width: 200px;" nz-input [(ngModel)]="user.email"></span>
    </div>
    <div class="data_div">
      <label>性别：</label>
      <span>男</span>
    </div>
    <div class="data_div">
      <label>个性签名：</label>
      <span>
        这个人很懒，什么也没有写！
      </span>
    </div>
    <div style="text-align: center;">
      <button style="margin: 10px;" nz-button nzType="default" *ngIf="!isInfoVisible" (click)="changeInfoVisible()">
        修改信息
      </button>
      <button style="margin: 10px;" nz-button nzType="default" *ngIf="isInfoVisible" (click)="changeInfoVisible()">
        确认修改
      </button>
      <button nz-button nzType="primary" (click)="logout()">退出登录</button>
    </div>
  </div>
</div>
